<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>新闻管理</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
    }
    .news-container {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .news-container h2 {
      margin-bottom: 20px;
      color: #333;
    }
    .news-container button {
      padding: 10px 20px;
      background-color: #007bff;
      border: none;
      border-radius: 4px;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
    }
    .news-container button:hover {
      background-color: #0056b3;
    }
    .news-list {
      list-style-type: none;
      padding: 0;
    }
    .news-list li {
      background-color: #f9f9f9;
      padding: 15px;
      margin-bottom: 10px;
      border-radius: 4px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
    .news-list li h3 {
      margin: 0;
      color: #333;
    }
    .news-list li p {
      margin: 5px 0;
      color: #666;
    }
    .news-list li form {
      display: inline;
      margin-right: 10px;
    }
    .news-list li button {
      padding: 5px 10px;
      background-color: #dc3545;
      border: none;
      border-radius: 4px;
      color: #fff;
      cursor: pointer;
    }
    .news-list li button:hover {
      background-color: #c82333;
    }
    .error {
      color: #dc3545;
      margin-top: 10px;
    }
    .message {
      color: #28a745;
      margin-top: 10px;
    }
    #addNewsForm, #editNewsForm {
      display: none;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin-top: 20px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000;
    }
    #addNewsForm h3, #editNewsForm h3 {
      margin-bottom: 20px;
      color: #333;
    }
    #addNewsForm input[type="text"],
    #addNewsForm textarea,
    #editNewsForm input[type="text"],
    #editNewsForm textarea {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    #addNewsForm button,
    #editNewsForm button {
      padding: 10px 20px;
      background-color: #28a745;
      border: none;
      border-radius: 4px;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
    }
    #addNewsForm button:hover,
    #editNewsForm button:hover {
      background-color: #218838;
    }
  </style>
</head>
<body>
<div class="news-container">
  <h2>新闻管理</h2>
  <button onclick="showAddNewsForm()">添加新闻</button>
  <div class="error" th:if="${error}" th:text="${error}"></div>
  <div class="message" th:if="${message}" th:text="${message}"></div>
  <ul class="news-list">
    <li th:each="news : ${newsList}">
      <h3><a th:href="'/news/' + ${news.id}" th:text="${news.title}"></a></h3>
      <p th:text="${news.content}"></p>
      <p>来源: <span th:text="${news.source}"></span></p>
      <p>创建时间: <span th:text="${news.createTime}"></span></p>

      <!-- 编辑新闻按钮 -->
      <button onclick="showEditNewsForm(${news.id}, '${news.title}', '${news.content}', '${news.source}')">编辑</button>

      <!-- 删除新闻表单 -->
      <form th:action="'/news/' + ${news.id}" method="post" th:method="delete">
        <button type="submit">删除</button>
      </form>

    </li>
  </ul>
</div>

<!-- 添加新闻的弹出窗口 -->
<div id="addNewsForm">
  <h3>添加新闻</h3>
  <form action="/news" method="post">
    <input type="text" name="title" placeholder="标题" required />
    <textarea name="content" placeholder="内容" required></textarea>
    <input type="text" name="source" placeholder="来源" required />
    <button type="submit">保存</button>
    <button type="button" onclick="hideAddNewsForm()">关闭</button>
  </form>
</div>

<!-- 编辑新闻的弹出窗口 -->
<div id="editNewsForm">
  <h3>编辑新闻</h3>
  <form id="editNewsFormForm" method="post">
    <input type="hidden" name="_method" value="put" />
    <input type="hidden" id="editNewsFormId" name="id" />
    <input type="text" id="editNewsFormTitle" name="title" placeholder="标题" required />
    <textarea id="editNewsFormContent" name="content" placeholder="内容" required></textarea>
    <input type="text" id="editNewsFormSource" name="source" placeholder="来源" required />
    <button type="submit">保存</button>
    <button type="button" onclick="hideEditNewsForm()">关闭</button>
  </form>
</div>

<script>
  function showAddNewsForm() {
    document.getElementById('addNewsForm').style.display = 'block';
  }

  function hideAddNewsForm() {
    document.getElementById('addNewsForm').style.display = 'none';
  }

  function showEditNewsForm(id, title, content, source) {
    document.getElementById('editNewsFormId').value = id;
    document.getElementById('editNewsFormTitle').value = title;
    document.getElementById('editNewsFormContent').value = content;
    document.getElementById('editNewsFormSource').value = source;
    document.getElementById('editNewsForm').style.display = 'block';
  }

  function hideEditNewsForm() {
    document.getElementById('editNewsForm').style.display = 'none';
  }

  document.getElementById('editNewsFormForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const news = {
      id: formData.get('id'),
      title: formData.get('title'),
      content: formData.get('content'),
      source: formData.get('source')
    };
    fetch(`/news/${news.id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(news)
    }).then(response => {
      if (response.ok) {
        hideEditNewsForm();
        location.reload();
      } else {
        alert('编辑新闻失败');
      }
    });
  });
</script>
</body>
</html>